<template>
	<view class="">
		<u-sticky>
			<u-tabs :list="tabList" activeStyle="font-weight:bold;color:#000000;"
				inactiveStyle="color:#9C9C9C;font-weight:nomal;" lineHeight="3px" lineWidth="20px"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<template v-if="task_type == 1">
			<view class="item" v-for="(item,index) of data" :key="index">
				<view class="comment-container">
					<commentComponent :info="item">
					</commentComponent>
				</view>
				<u-line></u-line>
				<!-- 工作 -->
				<jobItemComponent :info="item" v-if="item.task_type == 'task_job' || item.task_type == 'task_medical'">
				</jobItemComponent>
				<!-- 住房 -->
				<houseItemComponent :info="item" v-if="item.task_type == 'task_house'"></houseItemComponent>
			</view>
		</template>
		<template v-else>
			<view class="item" v-for="(item,index) of data" :key="index">
				<!-- 工作 -->
				<jobItemComponent :info="item" v-if="item.task_type == 'task_job' || item.task_type == 'task_medical'">
				</jobItemComponent>
				<!-- 住房 -->
				<houseItemComponent :info="item" v-if="item.task_type == 'task_house'"></houseItemComponent>
					<u-line></u-line>
				<view class="bottom-btn-container">
					<view class="bottom-btn-item" @click="goPath(item.comment_id)">
						评价
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import commentComponent from "@/components/commentItemComponent/index.vue"
	import jobItemComponent from "@/components/jobItemComponent/index.vue"
	import houseItemComponent from "@/components/houseItemComponent/index.vue"
	import {pageComment} from "@/api/comment.js"
	export default {
		components: {
			commentComponent,
			jobItemComponent
		},
		data(){
			return {
				tabList: [{
					name: '已评价',
					type: 1
				}, {
					name: '未评价',
					type: 0
				}],
				page: {
					page_size: 7,
					page_number: 1,
					total: 0
				},
				task_type: 1,
				data: [],
				status: "loadmore"
			}
		},
		onShow() {
			this.page = {
				page_size: 7,
				page_number: 1,
				total: 0
			}
			this.data = []
			this.status = 'loadmore'
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			goPath(id){
				uni.navigateTo({
					url: '/pages/comment/index?id='+id
				})
			},
			tabsChange(e) {
				this.task_type = e.type
				this.page = {
					page_size: 7,
					page_number: 1,
					total: 0
				}
				this.data = []
				this.status = 'loadmore'
				this.getData()
			},
			getData() {
				if (this.status != "nomore") {
					this.status = "loading"
				} else {
					return
				}
				pageComment({
						...this.page,
						status: this.task_type,
					})
					.then(res => {
						const data = (res.list || []).map(item => {
							try {
								item.images = JSON.parse(item.images)
							} catch (e) {
								item.images = []
							}
							try{
								item.tag = JSON.parse(item.tag)
							}catch(e){
								item.tag = []
							}
							try{
								item.file = JSON.parse(item.file)
							}catch(e){
								item.file = []
							}
							return item
						})
						this.page.total = res.total
						this.data.push(...data)
						if (this.data.length == res.total) {
							this.status = "nomore"
						} else {
							this.page.page_number += 1
							this.status = "loadmore"
						}
					})
					.catch(e => {
						this.status = "loadmore"
					})
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.item{
		box-sizing: border-box;
		margin: 10rpx auto;
		width: 692rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.comment-container{
			box-sizing: border-box;
			padding: 20rpx;
		}
		.bottom-btn-container{
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: flex-end;
			.bottom-btn-item{
				padding: 0 38rpx;
				line-height: 48rpx;
				border-radius: 50rpx;
				border: 2rpx solid #2B5BF8;
				color: #2B5BF8;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
</style>